<template>
  <div :id="keyId" class="line-box" :class="flexDirection == 'column' ? 'column-style' : 'row-style'">
    <div class="pull-box" v-if="clickClose" @click="handleClick">
      <template v-if="flexDirection == 'column'">
        <img src="./sanjiao-bottom.svg" style="width: 8px;height: 8px;" v-if="showPullBoxIcon() === 'right'">
        <img src="./sanjiao-top.svg" style="width: 8px;height: 8px;" v-else>
      </template> 
      <template v-else>
        <img src="./sanjiao-right.svg" style="width: 8px;height: 8px;" v-if="showPullBoxIcon() === 'right'">
        <img src="./sanjiao-left.svg" style="width: 8px;height: 8px;" v-else>
      </template>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, nextTick, inject, computed, watch } from 'vue';
export default {
  name: "partition-drag-line",
  props: {
    keyId: String,
    clickClose: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    closeDirection: {
      type: String,
      default: "left"
    }
  },
  setup(props, context) {
    const lineRef = ref();
    const datas = reactive({
      clientStart: null, // 初始位置
      clientStartY: null,
      oneOriginalFlex: null,
      twoOriginalFlex: null,
    })

    const slotSettings = inject("slotSettings");
    const partitionDragInit = inject("partitionDragInit");

    const flexDirection = computed(() => {
      return partitionDragInit.info.flexDirection;
    })
    const thisIndex = computed(() => {
      const index = slotSettings.value.findIndex(item => item.keyId === props.keyId);
      return index;
    })

    const methods = {
      init() {
        const moveDom = document.getElementById(props.keyId);
        moveDom.onmousedown = function (e) {
          if (flexDirection.value == "column") {
            datas.clientStart = e.clientY;
          } else {
            datas.clientStart = e.clientX;
          }
          document.onmousemove = function (e) {
            methods.moveHandle(e);
            return false
          };

          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            const one = slotSettings.value[thisIndex.value - 1];
            const two = slotSettings.value[thisIndex.value + 1];
            one.originalFlex = datas.oneOriginalFlex;
            two.originalFlex = datas.twoOriginalFlex;
          };
          return false
        }
      },
      moveHandle(e) {
        const one = slotSettings.value[thisIndex.value - 1];
        const two = slotSettings.value[thisIndex.value + 1];
        let movePX = 0;
        if (flexDirection.value == "column") {
          movePX = e.clientY - datas.clientStart;
          let oneFlex = null;
          let twoFlex = null;
          if (movePX > 0) {
            let xxWare = movePX / partitionDragInit.info.offsetHeight * 100;
            if (xxWare < two.originalFlex) {
              oneFlex = one.originalFlex + xxWare;
              twoFlex = two.originalFlex - xxWare;
            }
          } else {
            let xxWare = movePX * -1 / partitionDragInit.info.offsetHeight * 100;
            if (xxWare < one.originalFlex) {
              oneFlex = one.originalFlex - xxWare;
              twoFlex = two.originalFlex + xxWare;
            }
          }
          if(oneFlex != null && twoFlex != null){
            // 计算屏幕宽度
            const oneValue = oneFlex * partitionDragInit.info.offsetHeight / 100;
            const twoValue = twoFlex * partitionDragInit.info.offsetHeight / 100;
            // console.log("oneValue, twoValue", oneValue, twoValue)
            if(one.minValue && oneValue < one.minValue && movePX < 0) return;
            if(one.maxValue && oneValue > one.maxValue) return;
            if(two.minValue && twoValue < two.minValue && movePX > 0) return;
            if(two.maxValue && twoValue > two.maxValue) return;
            one.flex = oneFlex;
            two.flex = twoFlex;
            one.show = true;
            two.show = true;
          }
        } else {
          movePX = e.clientX - datas.clientStart;
          let oneFlex = null;
          let twoFlex = null;
          if (movePX > 0) {
            let xxWare = movePX / partitionDragInit.info.offsetWidth * 100;
            if (xxWare < two.originalFlex) {
              oneFlex = one.originalFlex + xxWare;
              twoFlex = two.originalFlex - xxWare;
            }
          } else {
            let xxWare = movePX * -1 / partitionDragInit.info.offsetWidth * 100;
            if (xxWare < one.originalFlex) {
              oneFlex = one.originalFlex - xxWare;
              twoFlex = two.originalFlex + xxWare;
            }
          }
          if(oneFlex != null && twoFlex != null){
            // 计算屏幕宽度
            const oneValue = oneFlex * partitionDragInit.info.offsetWidth / 100;
            const twoValue = twoFlex * partitionDragInit.info.offsetWidth / 100;
            // console.log("oneValue, twoValue", oneValue, twoValue, oneFlex, twoFlex)
            // console.log("------one.minValue, one.maxValue", one.minValue, one.maxValue)
            // console.log("------two.minValue, two.maxValue", two.minValue, two.maxValue)
            // console.log("movePX", movePX)
            if(one.minValue && oneValue < one.minValue && movePX < 0) return;
            if(one.maxValue && oneValue > one.maxValue && movePX > 0) return;
            if(two.minValue && twoValue < two.minValue && movePX > 0) return;
            if(two.maxValue && twoValue > two.maxValue && movePX < 0) return;
            one.flex = oneFlex;
            two.flex = twoFlex;
            one.show = true;
            two.show = true;
          }
        }

        datas.oneOriginalFlex = one.flex;
        datas.twoOriginalFlex = two.flex;
        // console.log("datas.oneOriginalFlex", datas.oneOriginalFlex, datas.twoOriginalFlex)
      },
      showPullBoxIcon(){
        if(props.closeDirection === "right"){
          const two = slotSettings.value[thisIndex.value + 1];
          if(two?.show){
            return "right";
          }else{
            return "left";
          }
        }else{
          const one = slotSettings.value[thisIndex.value - 1];
          if(one?.show){
            return "left";
          }else{
            return "right";
          }
        }
      },
      // 单击事件
      handleClick(){
        const one = slotSettings.value[thisIndex.value - 1];
        const two = slotSettings.value[thisIndex.value + 1];
        const closeDirection = props.closeDirection;
        if(closeDirection == "left"){
          if(one.show){
            // 显示, 需要设置成不显示
            two.flex = two.initFlex + one.initFlex;
            one.flex = 0;
          }else{
            two.flex = two.initFlex;
            one.flex = one.initFlex;
          }
          // console.log("one, two", one, two)
          one.originalFlex = one.flex;
          two.originalFlex = two.flex;
          one.show = !one.show
        }else{
          if(two.show){
            // 显示, 需要设置成不显示
            one.flex = one.initFlex + two.initFlex;
            two.flex = 0;
          }else{
            two.flex = two.initFlex;
            one.flex = one.initFlex;
          }
          one.originalFlex = one.flex;
          two.originalFlex = two.flex;
          two.show = !two.show
        }
      }
    }

    watch(() => partitionDragInit, (val, old) => {
      if (val.isInit) {
        methods.init()
      }
    }, { deep: true })

    return {
      lineRef,
      ...toRefs(datas),
      ...methods,
      flexDirection
    }
  }
}
</script>

<style lang="scss" scoped>
.line-box {
  position: relative;
  background-color: rgba(221, 221, 221);
  flex-shrink: 0;
}

.column-style {
  width: 100%;
  height: 6px;
  max-height: 6px;
  cursor: n-resize;
}

.row-style {
  width: 6px;
  max-width: 6px;
  cursor: e-resize;
}

.row-style .pull-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  font-size: 8px;
  align-items: center;
  background-color: #AAAAAA;
  height: 50px;
  width: 100%;
  cursor: pointer;
}

.column-style .pull-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  font-size: 8px;
  justify-content: center;
  background-color: #AAAAAA;
  height: 100%;
  width: 50px;
  cursor: pointer;
}
</style>